<template>
  <div class="sylogin">
    <img src="@/images/loginbg.png" alt="" class="lgbg" />
    <div class="sytitle">全自动血液细胞分析仪虚拟实验系统</div>
    <div class="loading-text syjd" id="loadingText">
      实验加载中，请稍等...0%
    </div>
    <div class="progress-container">
      <div class="progress-bar" @animationend="startfn">
        <img src="@/images/mark.png" alt="" class="progress-marker" />
      </div>
    </div>
    <!-- foot -->
  </div>
</template>

<script>
export default {
  name: 'WorkspaceJsonLoaDing',

  data() {
    return {
      progressPercentage: 0
    }
  },

  mounted() {
    // 获取进度条元素和加载文本元素
    const progressBar = this.$el.querySelector('.progress-bar')
    const loadingText = this.$el.querySelector('#loadingText')

    // 获取动画时长
    const animationDuration =
      parseFloat(window.getComputedStyle(progressBar).animationDuration) * 1000

    // 开始时间
    let startTime = null

    // 更新函数
    const updateProgress = (currentTime) => {
      if (!startTime) {
        startTime = currentTime
      }

      // 计算已过时间
      const elapsedTime = currentTime - startTime

      // 计算当前进度百分比
      const progressPercentage = Math.round(
        (elapsedTime / animationDuration) * 100
      )

      // 更新加载文本显示
      loadingText.textContent = `实验加载中，请稍等...${progressPercentage}%`

      // 如果动画还未结束，继续更新
      if (elapsedTime < animationDuration) {
        requestAnimationFrame(updateProgress)
      }
    }

    // 开始更新
    requestAnimationFrame(updateProgress)
  },

  methods: {
    startfn() {
      this.$router.push({
        name: 'home'
      })
    }
  }
}
</script>

<style>
.lgbg {
  width: 1920px;
  /* height: 950px; */
  height: 100%;
}
.sylogin {
  height: 100%;
  width: 100%;
}

.progress-container {
  position: relative;
  width: 1657px;
  height: 20px;
  background: linear-gradient(90deg, #2c74ac 0%, #2d73ab 48%, #2d77af 100%);
  border-radius: 61px 61px 61px 61px;
  /* overflow: hidden; */
  position: absolute;
  bottom: 388px;
  left: 50%;
  transform: translate(-50%, 0);
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%; /* 这里设置进度百分比 */
  height: 100%;
  background: linear-gradient(270deg, #81d1ff 0%, #0085ff 100%);
  border-radius: 117px 117px 117px 117px;
  border: 1px solid #00a3ff;
  animation: progress-animation 3s ease forwards; /* 使用动画 */
}

.progress-marker {
  position: absolute;
  top: 50%;
  right: -13px;
  width: 48px;
  height: 48px;
  transform: translate(0, -50%);
}

@keyframes progress-animation {
  to {
    width: 100%; /* 动画结束时宽度为100% */
  }
}
.syjd {
  position: absolute;
  bottom: 427px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 330px;
  height: 18px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 24px;
  color: #ffffff;
  line-height: 18px;
  letter-spacing: 1px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
</style>
